<template>
	<view class="content">
		<view class="header">
			<u-tabs :list="list1" @change="tabsChange"></u-tabs>
			<u-search v-model="requestParams.orderTestingId" placeholder="请输入工单号进行搜索" :clearabled="true"
				:showAction="false"></u-search>
		</view>
		<view class="main">
			<view class="main_body" v-for="(item,index) in dataForm" :key="index">
				<view class="detail">
					<view class="title">
						<view class="main_body_view main_body_view_title">
							<u-row>
								<u-col span="10">{{item.orderTestingId}}</u-col>
								<u-col span="10">{{buttonStatus(item.orderStatusId)}}</u-col>
							</u-row>
						</view>
					</view>
					<view class="main_content">
						<view class="main_body_view main_body_view_view">
							工单描述：{{item.orderDescription}}
						</view>
						<view class="main_body_view main_body_view_view">
							工单类型：{{item.orderType}}
						</view>
						<view class="main_body_view main_body_view_view">
							复检接单人：{{item.testingPickUserName || ''}}
						</view>
						<view class="main_body_view main_body_view_view">
							仓库接单人：{{item.warehousePickUserName || ''}}
						</view>
						<view class="main_body_view main_body_view_view">
							仓库送出人：{{item.warehouseSendUserName || ''}}
						</view>
						<view class="main_body_view main_body_view_view">
							{{item.orderType}}接收人：{{item.testingReceivedUserName || ''}}
						</view>
					</view>
				</view>
				<view>
					<view class="button" style="margin-bottom: 10px;">
						<u-button @click="buttonClick(item.orderTestingId, item.orderType,item.orderStatusId)" type="primary" size="mini"
							:text="buttonText(item.orderType, item.orderStatusId)"></u-button>
					</view>
				</view>
				<view class="footer" />
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request.js"
	export default {
		data() {
			return {
				dataForm: [],
				requestParams: {
					orderTestingId: '', //工单id
					pageNum: 1,
					pageSize: 10,
					testingPickUserId:this.$store.state.user.userId, //工程师id
					orderStatusIds: '-1, 90, 93, 94'
				},
				notStatus: '-1, 90, 93, 94',
				yesStatus: '95',
				title: 'Hello',
				list1: [{
					name: '未完成',
				}, {
					name: '已完成',
				}],
			}
		},
		onLoad: async function() {
			uni.showLoading({
				title: '正在加载中'
			})
			await this.getFormData();
			uni.hideLoading()
		},
		onReachBottom() {
			this.requestParams.pageNum = this.requestParams.pageNum - 0 + 1;
			this.getFormData()
		},
		watch: {
			'requestParams.orderTestingId'(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.changeSelect(newVal);
				}
			}
		},
		methods: {
			buttonStatus(statusId) {
				let text = "";
				switch (statusId) {
					case "90":
						text = "未抢单";
						break;
					case "91":
						text = "已抢单";
						break;
					case "92":
						text = "已接单";
						break;
					case "93":
						text = "已送出";
						break;
					case "94":
						text = "已接收";
						break;
					case "95": 
						text = "已完成";
						break;
					default:
						text = '未知';
						break;
				}
				return text;
			},
			buttonText(orderType, statusId) {
				let text = "";
				switch (statusId) {
					case "90":
						text = "抢单";
						break;
					case "91":
						text = "接单";
						break;
					case "92":
						text = "送出";
						break;
					case "93":
						text = "接收";
						break;
					case "94":
						text = "详情";
						break;
					default:
						text = "详情";
						break;
				}
				return text;
			},
			// 点击按钮
			detailsClick(workId) {
			   uni.navigateTo({
			     url: "detailcheck?workId=" + workId
			   });
			 },
			buttonClick(workId, type, itemNum) {
				// console.log(type)
				uni.showLoading({
					title: '正在加载中'
				})
				let requestData = {
					orderTestingId: workId,
					method: '',
					orderStatusId: ''
				}
				if (itemNum === '90') {
				    requestData.method = "get_order";
				} else if (itemNum === '91') {
				    requestData.method = "accept_order";
				} else if (itemNum === '92') {
				    requestData.method = "send_order";
				} else if (itemNum === "93") {
				    requestData.method = "receive_order";
				} else if (itemNum === "94" || itemNum === "95") {
				    if (type === "检测") {
				        uni.navigateTo({
				            url: "test?orderTestingId=" + workId
				        });
				    } else if (type === "整备") {
				        uni.navigateTo({
				            url: "outfit?orderTestingId=" + workId
				        });
				    } else if (type === "验机") {
				        uni.navigateTo({
				            url: "testMachine?orderTestingId=" + workId
				        });
				    } else if (type === "售后") {
				        uni.navigateTo({
				            url: "afterSale?orderTestingId=" + workId
				        });
				    }
				    return;
				}
				request({
					url: 'system/testing',
					method: "PUT",
					data: requestData
				}).then((res) => {
					this.dataForm.length = 0;
					this.getFormData();
					uni.hideLoading()
				})
			},
			// 完成未完成
			tabsChange(item) {
				uni.showLoading({
					title: "正在加载中"
				})
				if (item.index === 0) {
					this.requestParams.orderStatusIds = this.notStatus;
				} else {
					this.requestParams.orderStatusIds = this.yesStatus;
				}
				this.requestParams.pageNum = 1;
				this.dataForm.length = 0;
				this.getFormData();
				uni.hideLoading()
			},
			// 查询列表数据
			getFormData() {
				uni.hideLoading()
				request({
					url: 'system/testing/list',
					method: "GET",
					data: this.requestParams,
				}).then((res) => {
					this.requestParams.pageNum -= (!res.rows);
					// if (this.dataForm.length < res.total) {
					this.dataForm = res.rows
					// }
				})
			},
			// 搜索功能
			changeSelect(item) {
				uni.showLoading({
					title: "正在加载中"
				})
				this.requestParams.orderTestingId = item + '';
				this.requestParams.pageNum = 1;
				this.dataForm.length = 0;
				this.getFormData();
				uni.hideLoading()
			}
		},
		filters: {
			formatDate: function(value, args) {
				var dt = new Date(value);
				if (args == 'yyyy-M-d') { // yyyy-M-d
					let year = dt.getFullYear();
					let month = dt.getMonth() + 1;
					let date = dt.getDate();
					return `${year}-${month}-${date}`;
				} else if (args == 'yyyy-M-d H:m:s') { // yyyy-M-d H:m:s
					let year = dt.getFullYear();
					let month = dt.getMonth() + 1;
					let date = dt.getDate();
					let hour = dt.getHours();
					let minute = dt.getMinutes();
					let second = dt.getSeconds();
					return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
				} else if (args == 'yyyy-MM-dd') { // yyyy-MM-dd
					let year = dt.getFullYear();
					let month = (dt.getMonth() + 1).toString().padStart(2, '0');
					let date = dt.getDate().toString().padStart(2, '0');
					return `${year}-${month}-${date}`;
				} else { // yyyy-MM-dd HH:mm:ss
					let year = dt.getFullYear();
					let month = (dt.getMonth() + 1).toString().padStart(2, '0');
					let date = dt.getDate().toString().padStart(2, '0');
					let hour = dt.getHours().toString().padStart(2, '0');
					let minute = dt.getMinutes().toString().padStart(2, '0');
					let second = dt.getSeconds().toString().padStart(2, '0');
					return `${month}-${date} ${hour}:${minute}`;
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: rgb(244, 249, 254);
		.header {
			box-sizing: border-box;
			width: 100%;
			position: sticky;
			top: 0;
			z-index: 999;
			display: flex;
			overflow: hidden;
			justify-content: space-around;
			background:#f4f9fe;
			box-shadow:0px 3px 10px rgba(0, 124, 233, 0.16);
			margin-bottom: 10upx;
			/deep/ .u-search__content {
				background-color: #ffffff !important;
			}
			/deep/ .u-search__content__input {
				background-color: #ffffff !important;
			}
		}	
		.main {
			margin-bottom: 100px;
			.main_body {
				background-color: rgb(226, 241, 255);
				margin: 20upx;
				border-radius: 2%;
				border:1px solid;
				border-color:rgba(0, 124, 233, 0.4);
				.title {
					border-bottom:1px solid;
					border-color:rgb(140, 196, 246);
					padding: 20upx;
					.main_body_view {
						margin: 10upx;
					}		
					.main_body_view_title {	
						margin-bottom: 10upx;
					}
				}
				.main_content {
					padding: 20upx;
					background-color: #ffffff;
				}
				
				.button {
					position: absolute;
					right: 100upx;
					width: 40rpx;
				}
				.footer{
					height:30px;
					background-color: #ffffff;
					border-bottom-left-radius: 15upx;
					border-bottom-right-radius: 15upx;
				}
			}
		}	
		.tabbar {
			position: sticky;
			bottom: 30upx;
			z-index: 999;
		}
	}
</style>